<template>
  <!-- 课程列表卡片列部分表 -->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="courseName" label="课程名称" width="180" />
    <el-table-column prop="createTime" label="创建时间" />
    <!-- switch -->
    <el-table-column label="可见状态">
      <template v-slot="scope">
        <el-switch
          @change="changeSwitch(_, scope.row.id)"
          v-model="scope.row.state"
        />
      </template>
    </el-table-column>
    <!-- 操作按钮 -->
    <!-- 注：题目中文字叙述显示message，图片又只是显示一行文字，这里按图片标准做 -->
    <el-table-column v-slot="scope" label="操作">
      <!-- 编辑按钮 -->
      <el-button plain value="编辑" @click="getMessage($event, scope.row.id)"
        ><el-icon><edit-pen /></el-icon
      ></el-button>
      <!-- 资源管理按钮 -->
      <el-button
        plain
        value="资源管理"
        @click="getMessage($event, scope.row.id)"
        ><el-icon><files /></el-icon
      ></el-button>
      <!-- 资源编排按钮 -->
      <el-button
        plain
        value="资源编排"
        @click="getMessage($event, scope.row.id)"
        ><el-icon><monitor /></el-icon
      ></el-button>
      <!-- 开课按钮 -->
      <el-button plain value="开课" @click="getMessage($event, scope.row.id)"
        ><el-icon><school /></el-icon
      ></el-button>
    </el-table-column>
  </el-table>
  <p>正在{{ buttonType }}{{ course }}</p>
</template>

<script>
export default {
  data() {
    return {
      buttonType: "",
      course: "",
      list: [
        {
          id: 1,
          courseName: "Java程序设计",
          createTime: "2020-12-12",
          state: false,
        },
        {
          id: 2,
          courseName: "MySQL数据库技术",
          createTime: "2020-12-11",
          state: true,
        },
        {
          id: 3,
          courseName: "Web前端开发基础",
          createTime: "2020-12-11",
          state: true,
        },
        {
          id: 4,
          courseName: "Web前端项目开发实战",
          createTime: "2020-12-11",
          state: true,
        },
      ],
    };
  },
  methods: {
    //   为消息内文字赋值
    getMessage(e, id) {
      this.buttonType = e.target.value;
      console.log(e.target);
      this.course = this.list[id - 1].courseName;
    },
    // 修改可见状态
    changeSwitch(callback, id) {
      console.log(this.list[id - 1]);
      console.log(id);
      if (this.list[id - 1].state) {
        this.$message.success(this.list[id - 1].courseName + "现在是可见的");
      }else{
        this.$message.warning(this.list[id - 1].courseName +'现在不可见')
      }
    },
  },
};
</script>

<style>
</style>